<template>
  <div
    class="dragList_test"
    id="dragList_test"
    dragList_space="aaa"
    dragList_direct="vertical"
  >
    <div
      class="unitItem"
      :id="'unitItemindex' + id_split + key"
      v-for="key of testData.data"
      :key="key"
      :jkl="key"
    >
      点我 {{ key }}
    </div>
  </div>

  <div
    class="dragList_test"
    id="dragList_test0"
    dragList_space="aaa"
    dragList_direct="vertical"
  >
    <div
      class="unitItem"
      :id="'unitItemindex' + key"
      v-for="key of testData0.data"
      :key="key"
      :jkl="key"
    >
      点我 {{ key }}
    </div>
  </div>

  <div class="spaceWhite_anima widthaaa" spaceActive="false">123456</div>

  <div class="clickme" @click="clickme">点我 展示 数组 数据</div>
</template>

<script setup>
import { onMounted } from 'vue';
import { dragList } from './dragList';

import './dragList.css';
import { id_split } from '../../../components/my_schedule/DataDefine/sourceData';

let testData = { data: ['663', '662', '661', '660', '664'] };
let testData0 = { data: ['763', '762', '760'] };

function clickme() {
  console.log([...testData.data]);
}

onMounted(() => {
  let dragList_test0 = document.getElementById('dragList_test');
  dragList(dragList_test0, {
    attriKey: 'jkl',
    targetData: testData,
    idPrefix: 'unitItemindex',
  });
});
</script>

<style scoped lang="scss"></style>

<style></style>
